import 'package:flutter/material.dart';

class ButtonDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Widget _flatButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        FlatButton(
          child: Text('Button'),
          onPressed: () {
            debugPrint('Button is onPressed');
          },
          //渐变效果
          splashColor: Colors.grey,
          textColor: Colors.blue,
        ),
        SizedBox(
          width: 16.0,
        ),
        FlatButton.icon(
          icon: Icon(Icons.add),
          label: Text('Button'),
          onPressed: () {
            debugPrint('Button is onPressed');
          },
          //渐变效果
          splashColor: Colors.grey,
          textColor: Colors.blue,
        ),
      ],
    );

    final Widget _outlineButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        OutlineButton(
          child: Text('Button'),
          onPressed: () {
            debugPrint('Button is onPressed');
          },
          //渐变效果
          splashColor: Colors.grey,
          textColor: Colors.blue,
//        textTheme: ButtonTextTheme.primary,
          borderSide: BorderSide(
            color: Colors.black87,
          ),
          color: Colors.green,
        ),
        SizedBox(
          width: 16.0,
        ),
        OutlineButton.icon(
          icon: Icon(Icons.add),
          label: Text('Button'),
          onPressed: () {
            debugPrint('Button is onPressed');
          },
          //渐变效果
          splashColor: Colors.grey,
          textColor: Colors.blue,
        ),
      ],
    );

    final Widget _raisedButtonDemo = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Theme(
          data: Theme.of(context).copyWith(
            buttonColor: Theme.of(context).accentColor,
            buttonTheme: ButtonThemeData(
              textTheme: ButtonTextTheme.primary,
              //带一定弧度的背景
//              shape: BeveledRectangleBorder(
//                borderRadius: BorderRadius.circular(5.0),
//              ),
              //圆弧的背景
              shape: StadiumBorder(),
            ),
          ),
          child: RaisedButton(
            child: Text('Button'),
            onPressed: () {
              debugPrint('Button is onPressed');
            },
            //渐变效果
            splashColor: Colors.grey,
            textColor: Colors.blue,
            //阴影的高度
            elevation: 10.0,
          ),
        ),
        SizedBox(
          width: 16.0,
        ),
        RaisedButton.icon(
          icon: Icon(Icons.add),
          label: Text('Button'),
          onPressed: () {
            debugPrint('Button is onPressed');
          },
          //渐变效果
          splashColor: Colors.grey,
          textColor: Colors.blue,
          //阴影的高度
          elevation: 5.0,
        ),
      ],
    );

    return Scaffold(
      appBar: AppBar(
        title: Text('ButtonDemo'),
        elevation: 0.0,
      ),
      body: Container(
        padding: EdgeInsets.all(8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _flatButtonDemo,
            SizedBox(
              height: 16.0,
            ),
            _raisedButtonDemo,
            SizedBox(
              height: 16.0,
            ),
            _outlineButtonDemo,
          ],
        ),
      ),
    );
  }
}